<template>
  <div>
    <el-row :gutter="20" style="margin-top:10px;">
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>注册信息</span>
            </div>
            <div style="height: 150px;line-height: 150px;margin: auto">
              <img :src="play.pic" class="image" style="height: 150px;width: 150px;margin: auto">
            </div>
            <div class="personal-relation">
              注册邮箱: {{play.email}}
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="grid-content bg-purple">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>基本资料</span>
            </div>
            <div>
              <el-form label-width="80px" :model="play" :rules="rules2" ref="play" label-position="right">
                <el-form-item prop="sex" label="性别：">
                  <el-input v-model="play.gender" readonly></el-input>
                </el-form-item>
                <el-form-item prop="name" label="昵称：">
                  <el-input v-model="play.name"></el-input>
                </el-form-item>
                <el-form-item prop="age" label="年龄：">
                  <el-input   placeholder="年龄" type="number" v-model="play.age"></el-input>
                </el-form-item>
                <el-form-item prop="phone" label="手机号：">
                  <el-input  placeholder="手机号" v-model="play.phone"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm('play')">修改个人信息</el-button>
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <div class="game">
      <el-table
        :data="glist"
        border
        style="width: 100%">
        <el-table-column
          fixed
          prop="gname"
          label="游戏名称"
          width="600">
        </el-table-column>
        <el-table-column
          prop="price"
          label="价格"
          width="600">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="180">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="修改信息" :visible.sync="dialogFormVisible">
      <el-form :model="playGame">
        <el-form-item label="游戏名称" :label-width="formLabelWidth">
          <el-input v-model="playGame.gname" autocomplete="off" readonly>{{playGame.gname}}</el-input>
        </el-form-item>
        <el-form-item label="价格" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="playGame.price">{{playGame.price}}</el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updatePlayGame()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    name: "pcenter",
    data(){
      let checkTel = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入手机号'))
        } else if (!this.checkMobile(value)) {
          callback(new Error('手机号不合法'))
        } else {
          callback()
        }
      }
      //验证昵称
      let checkName = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入昵称'))
        } else {
          callback()
        }
      }
      return{
        play:{},
        glist:[],
        rules2: {
          phone: [{ validator: checkTel, trigger: 'change' }],
          name:[{validator: checkName, trigger: 'change'}]
        },
        dialogFormVisible: false,
        playGame: {
        },
        formLabelWidth: '120px'
      }
    },
    methods:{
      getUser:function () {
        var user=sessionStorage.getItem("user");
        axios.post("api/play/findOne",{playname:user}).then(res=>{
            this.play=res.data.data;
            axios.post("api/play/findplaygame",{pid:this.play.id}).then(res=>{
            this.glist=res.data.data;
          })
        })
      },
      updatePlayGame:function(){
        this.playGame.pid=this.play.id;
        axios.post("api/play/updateprice",this.playGame).then(res=>{
          this.dialogFormVisible = false;
          alert(res.data.mgs);
        })
      },
      handleClick(row) {
        this.dialogFormVisible = true
        this.playGame=row;
      },
      // 验证手机号
      checkMobile(str) {
        let re = /^1\d{10}$/
        if (re.test(str)) {
          return true;
        } else {
          return false;
        }
      },
      submitForm(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            axios.post("/api/play/update",this.play).then(res=>{
              if (res.data.code==200){
                alert(res.data.mgs);
                location.reload()
              } else{
                alert(res.data.mgs);
              }
            })
          } else {
            console.log("提交失败!!");
            return false;
          }
        })
      },
    },
    mounted(){
      this.getUser();
    }

  }
</script>

<style>
  .clearfix{
    height: 20px;
    line-height: 20px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .game{
    margin-top: 20px;
    width: 100%;
  }
  .box-card {
    width: 100%;
  }
  .personal-relation {
    height: 126px;
    font-size: 16px;
    padding: 0px 5px 15px;
    margin-right: 1px;
    width: 100%
  }

  .relation-item {
    padding: 12px;

  }
  .dialog-footer{
    height: 30px;
    line-height: 30px;
    padding-top:10px ;
    padding-left: 10%;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
</style>
